import { Box, Button, CardMedia, TextField } from '@mui/material';
import React, { JSX } from 'react';
import HIT from '../../assets/hit.jpg';
import { useNavigate } from 'react-router-dom';
import { authActions, selectErrorMessage, selectErrorOpen, selectRegistered } from '../../actions/Auth';
import { useAppDispatch, useAppSelector } from '../../actions/hooks';
import '@fontsource/open-sans';
import AlertBox from '../../components/AlertBox';

function Register(): JSX.Element {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const registered = useAppSelector(selectRegistered);
  const errorMessage = useAppSelector(selectErrorMessage);
  const errorOpen = useAppSelector(selectErrorOpen);

  const [userName, setUserName] = React.useState<string>('');
  const [password, setPassword] = React.useState<string>('');
  const [repeatPassword, setRepeatPassword] = React.useState<string>('');
  const [inviteCode, setInviteCode] = React.useState<string>('');

  React.useEffect(() => {
    dispatch(authActions.loadToken());
  });

  React.useEffect(() => {
    if (registered) {
      navigate('/login');
    }
  }, [registered, navigate]);

  const onLoginClick = () => {
    navigate('/login');
  };

  const onRegisterClick = () => {
    dispatch(authActions.register({ userName: userName, password: password, inviteCode: inviteCode }));
  };

  return (
    <>
      <Box sx={{
        display: 'flex',
        flexDirection: 'row'
      }}>
        <Box sx={{
          width: '43%',
          height: '100vh'
        }}>
          <CardMedia
            component="img"
            src={HIT}
            alt="Login Image"
            sx={{
              width: '100%',
              height: '100%'
            }}
          />
        </Box>
        <Box sx={{
          flexGrow: 1,
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <Box
            sx={{
              width: '400px',
              height: '640px'
            }}
          >
            <Box sx={{
              fontFamily: 'Open Sans',
              fontWeight: 800,
              fontSize: '42px',
              lineHeight: '125%'
            }}>
              注册
            </Box>
            <Box height='98px'>
              <Box sx={{
                fontFamily: 'Open Sans',
                fontStyle: 'normal',
                fontWeight: 600,
                fontSize: '18px',
                lineHeight: '125%',
                marginTop: '50px'
              }}>
                用户名
              </Box>
              <Box sx={{
                marginTop: '12px'
              }}>
                <TextField
                  placeholder='用户名' fullWidth={true} size='small'
                  value={userName} onChange={(action) => setUserName(action.target.value)}
                />
              </Box>
            </Box>
            <Box height='98px'>
              <Box sx={{
                display: 'flex',
                position: 'relative',
                justifyContent: 'space-between'
              }}>
                <Box sx={{
                  fontFamily: 'Open Sans',
                  fontStyle: 'normal',
                  fontWeight: 600,
                  fontSize: '18px',
                  lineHeight: '125%',
                  order: 0
                }}>
                  密码
                </Box>
              </Box>
              <Box sx={{
                marginTop: '12px'
              }}>
                <TextField
                  type='password' placeholder='密码'
                  value={password} onChange={(action) => setPassword(action.target.value)}
                  fullWidth={true} size='small'
                />
              </Box>
            </Box>
            <Box height='98px'>
              <Box sx={{
                display: 'flex',
                position: 'relative',
                justifyContent: 'space-between'
              }}>
                <Box sx={{
                  fontFamily: 'Open Sans',
                  fontStyle: 'normal',
                  fontWeight: 600,
                  fontSize: '18px',
                  lineHeight: '125%',
                  order: 0
                }}>
                  重复密码
                </Box>
              </Box>
              <Box sx={{
                marginTop: '12px'
              }}>
                <TextField
                  type='password' placeholder='重复密码'
                  value={repeatPassword} onChange={(action) => setRepeatPassword(action.target.value)}
                  fullWidth={true} size='small'
                />
              </Box>
            </Box>
            <Box height='98px'>
              <Box sx={{
                display: 'flex',
                position: 'relative',
                justifyContent: 'space-between'
              }}>
                <Box sx={{
                  fontFamily: 'Open Sans',
                  fontStyle: 'normal',
                  fontWeight: 600,
                  fontSize: '18px',
                  lineHeight: '125%',
                  order: 0
                }}>
                  邀请码
                </Box>
              </Box>
              <Box sx={{
                marginTop: '12px'
              }}>
                <TextField
                  placeholder='邀请码'
                  value={inviteCode} onChange={(action) => setInviteCode(action.target.value)}
                  fullWidth={true} size='small'
                />
              </Box>
            </Box>
            <Box sx={{
              marginTop: '35px'
            }}>
              <Button variant='contained' fullWidth disableElevation onClick={onRegisterClick} sx={{ backgroundColor: '#0052CC' }}>
                注册
              </Button>
            </Box>
            <Box sx={{
              marginTop: '15px'
            }}>
              <Button variant='outlined' fullWidth disableElevation onClick={onLoginClick}>
                登录
              </Button>
            </Box>
          </Box>
        </Box>
      </Box>
      <AlertBox
        title='错误'
        message={errorMessage}
        open={errorOpen}
        autoHideDuration={4000}
        severity='warning'
        onClose={() => { dispatch(authActions.closeError()); }}
      />
    </>
  );
}

export default Register;